<template>
    <div class="personnel-management">
        <Layout>
            <Header class="header">
                <Row>
                    <Col :span="24">
                        <div>
                            <span class="border-left"></span>
                            人员管理
                        </div>
                    </Col>
                </Row>
            </Header>
            <Content class="content">
                <div class="search-box">
                    <Row :gutter="16" style="min-width:1024px">
                        <Col :span="6">
                            用户昵称：
                            <Input v-model="serviceName" placeholder="用户ID/账号" style="width:auto"/>
                        </Col>
                        
                        <Col :xs="3" :sm="4" :md="4" :lg="6">
                            <div class="search-btn">查询</div>
                        </Col>
                    </Row>
                </div>

                <div class="add-service">
                    <Row>
                        <Col :span="24" class="add-btn-box">
                            <div class="add-btn" @click="add">添加成员</div>
                        </Col>
                    </Row>
                </div>

                <div class="table-box">
                    <el-table
                        :data="tableData"
                        size="mini"
                        style="width: 100%;min-width:940px">
                        <!-- <el-table-column
                            type="selection"
                            width="55">
                        </el-table-column> -->
                        <!-- <el-table-column
                            align="center"
                            prop="id"
                            label="服务ID">
                        </el-table-column> -->
                        <el-table-column
                            align="center"
                            prop="account"
                            label="成员账号">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="userName"
                            label="姓名">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            label="登录账号">
                            <template slot-scope="scope">
                                <p>{{scope.row.login}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            label="所属角色">
                            <template slot-scope="scope">
                                <p>{{scope.row.role === 0 ? '总代' : '区域代理'}}</p>
                            </template>
                        </el-table-column>
                        
                        <el-table-column
                            fixed="right"
                            label="操作"
                            width="240"
                            align="center">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="permissions(scope.row.roleId)">权限设置</el-button>
                                <!-- <el-button type="text" size="small">查看邀请人</el-button> -->
                                <el-button type="text" size="small" >编辑</el-button>
                                <el-button type="text" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <div class="page-box">
                    <Page :total="total" :page-size="pageSize" show-elevator show-total />
                </div>

                <!-- 编辑成员模态框 -->
                <el-dialog
                    :title="dialogTitle"
                    :visible.sync="editService"
                    width="30%"
                    :before-close="() => editService = false">
                    <Row>
                        <Col :span="24">
                            服务名称: &nbsp;&nbsp;<Input v-model="editServiceForm.serviceName" style="width:100px"/>
                        </Col>
                        <Col :span="24" style="margin-top:20px">
                            服务类型:
                            &nbsp;&nbsp;
                            <el-radio v-model="editServiceForm.serviceType" label="0">广告类</el-radio>
                            <el-radio v-model="editServiceForm.serviceType" label="1">接单类</el-radio>
                        </Col>
                        <Col :span="24" style="margin-top:20px">
                            服务费比例:&nbsp;&nbsp;
                            <Input v-model="editServiceForm.servicePercent" style="width:220px"/>
                        </Col>
                        <Col :span="24" style="margin-top:20px">
                            超时分钟:&nbsp;&nbsp;
                            <Input v-model="editServiceForm.serviceTimeout" style="width:220px"/>
                        </Col>
                    </Row>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="editService = false">取 消</el-button>
                        <el-button type="primary" @click="editService = false">确 定</el-button>
                    </span>
                </el-dialog>
            </Content>
            <Footer>
                <p class="copy-right">Copyright © {{host}}, All Rights Reserved.</p>
            </Footer>
        </Layout>
    </div>
    
</template>

<script>
    export default {
        data(){
            return {
                host: window.location.host,
                serviceName: '',
                tableData: [
                    {
                        account: 'windir',
                        userName: '张三',
                        login: '5698401@qq.com',
                        role: 0
                    }
                ],//表格数据
                total: 6,//数据总条数
                pageSize: 10,//每页显示条数
                addCoupons: false,//添加优惠券模态框控制
                full: '',//满减-满
                minus: '',//满减-减
                number: '',//发放数量
                editService: false,//编辑服务模态框控制
                editServiceForm: {
                    serviceName: '',//编辑服务名称
                    serviceType: '',//编辑服务类型
                    servicePercent: '',//编辑服务服务费百分比
                    serviceTimeout: '',//编辑服务超时时间
                },
                dialogTitle: '',//编辑/添加服务模态框标题
            }
        },
        mounted(){
            this.getTableData();
        },

        computed: {

        },

        watch: {
            
        },
        
        methods: {
            //获取数据
            getTableData() {
                for (let index = 0; index < 5; index++) {
                    this.tableData.push(this.tableData[0])
                }
            },
            //权限设置
            permissions(id) {
                
            },
            //编辑
            edit(row) {
                
            },
            //添加服务
            add() {
                this.$router.push({name: 'AddUser'});
            },
            permissions(roleId) {
                this.$router.push({name: 'Permissions',params:{roleId}})
            }
        }  
    }
</script>


<style lang="less">
    @import '../../../assets/styles/constant.less';
    .personnel-management{
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f5f7f9;
        .ivu-layout{
            min-height: 100%;
        }
        .header{
            font-size: 14px;
            line-height: 40px;
            height: 40px !important;
            color: #434343;
            padding: 0 50px;
            background-color: @background;
            border-bottom: 1px solid #ddd;
            .border-left {
                border-left: 5px solid @baseColor;
                margin-right: 4px;
            }
        }
        .content{
            width: 100%;
            min-height: 76%;
            padding: 20px 60px;
            .search-box{
                .search-btn{
                    width: 100px;
                    height: 32px;
                    line-height: 32px;
                    text-align: center;
                    background-color: @greenColor;
                    border-radius: 4px;
                    color: #fff;
                    cursor: pointer;
                }
            }
            .add-service{
                margin-top: 10px;
                .add-btn-box{
                    display: flex;
                    justify-content: flex-end;
                    .add-btn{
                        width: 100px;
                        height: 32px;
                        line-height: 32px;
                        text-align: center;
                        background-color: #fff;
                        border: 1px solid #ddd;
                        border-radius: 4px;
                        color: #333;
                        cursor: pointer;
                    }
                }
            }
            .table-box{
                margin-top: 10px;
                min-width: 100%;
                .el-table th{
                    background-color: #eee;
                    color: #333;
                    font-size: 14px;
                }
                .el-button--text{
                    color: @greenColor;
                }
            }
            .page-box{
                height: 50px;
                line-height: 50px;
                text-align: right;
                background-color: #fff;
                padding: 0 20px;
            }
        }
        .copy-right{
            text-align: center;
            color: #aaa;
            font-size: 12px;
        }
    }
</style>